<template>
  <el-card class="swiper-container">
    <template #header>
      <el-card>
        <div class="header">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd"
            >增加</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="handleDelete"
          >
            <template #reference>
              <el-button type="danger" size="small" icon="el-icon-delete"
                >批量删除</el-button
              >
            </template>
          </el-popconfirm>
        </div>
      </el-card>
      <DialogAddSwiper
        ref="addSwiper"
        :reload="getCarousels"
        :type="state.type"
      />
    </template>
    <el-table
      :loading="state.loading"
      :data="state.tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="轮播图" width="200">
        <template #default="scope">
          <img
            style="width: 150px; height: 150px"
            :src="scope.row.carouselUrl"
            alt="轮播图"
          />
        </template>
      </el-table-column>
      <el-table-column label="跳转链接">
        <template #default="scope">
          <a target="_blank" :href="scope.row.redirectUrl">{{
            scope.row.redirectUrl
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="carouselRank" label="排序值" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="200">
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import axios from "@/utils/axios";
import DialogAddSwiper from "../components/DialogAddSwiper.vue";

const addSwiper = ref(null);
const state = reactive({
  loading: false,
  tableData: [],
  currentPage: 1,
  pageSize: 10,
  type: "add",
});

onMounted(() => {
  getCarousels();
});

const handleAdd = () => {
  state.type = "add";
  addSwiper.value.open();
};

const handleEdit = () => {
  state.type = "edit";
  addSwiper.value.open(id);
};

const handleDelete = () => {};

const getCarousels = () => {
  state.loading = true;
  state.tableData = [
    {
      carouselUrl:
        "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
      redirectUrl:
        "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
      carouselRank: "1",
      createTime: "2023-11-06 15:21",
    },
  ];
  // axios
  //   .get("/carousels", {
  //     params: {
  //       pageNumber: state.currentPage,
  //       pageSize: state.pageSize,
  //     },
  //   })
  //   .then((res) => {
  //     state.tableData = res.list;
  //     state.loading = false;
  //   });
};
</script>
<style scoped></style>
